{include file="public/header-static"/}
{include file="public/sidebar"/}


<div id="main">
    {include file="public/header"/}
    <main class="main-content">
        <div class="container">
            <div class="page-header">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="#">首页</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">社群设置  </li>
                    </ol>
                </nav>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <form action="{:url('/console/resourceEdit')}" method="post" target="iframe_form" enctype="multipart/form-data" >

                                <div class="form-group row">
                                    <input type="hidden" name="id" value="{$info.id}">
                                    <label for="" class="col-sm-1 col-form-label">社群名称</label>
                                    <div class="col-sm-8">
                                        <input type="text" name="name"  class="form-control" placeholder="社群名称" value="{$info.name}">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="" class="col-sm-1 col-form-label">创建人</label>
                                    <div class="col-sm-8">
                                        <input type="text" name="founder"  class="form-control"  placeholder="创建人" value="{$info.founder}">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="" class="col-sm-1 col-form-label">用户ID</label>
                                    <div class="col-sm-8">
                                        <input type="text" name="uid"  class="form-control"  placeholder="用户ID" value="{$info.uid}">
                                    </div>
                                </div>


                                <div class="form-group row">
                                    <label class="col-sm-1 col-form-label">经营地址</label>
                                    <div class="input-group col-sm-8">

                                        <select name="province" id="province"  class="form-control" style="width:33%;">
                                            <option value="">请选择省份</option>
                                            {volist name="province" id="vo"}
                                            <option value="{$vo.location_id}" {if $vo.location_id == $info.province}selected{/if}>{$vo.name}</option>
                                            {/volist}
                                        </select>

                                        <select name="city" id="city"  class="form-control" style="width:33%;">
                                            <option value="">请选择城市</option>
                                            {volist name="city" id="vo"}
                                            <option value="{$vo.location_id}" {if $vo.location_id == $info.city}selected{/if}>{$vo.name}</option>
                                            {/volist}
                                        </select>

                                        <select name="area" id="area"  class="form-control" style="width:33%;">
                                            <option value="">请选择地区</option>
                                            {volist name="area" id="vo"}
                                            <option value="{$vo.location_id}" {if $vo.location_id == $info.area}selected{/if}>{$vo.name}</option>
                                            {/volist}
                                        </select>

                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="" class="col-sm-1 col-form-label">详细地址</label>
                                    <div class="col-sm-8">
                                        <input type="text" name="location"  class="form-control"  placeholder="详细地址" value="{$info.location}">
                                    </div>
                                </div>

<!--                                <div class="form-group row">-->
<!--                                    <label class="col-sm-1 col-form-label">LOGO</label>-->
<!--                                    <div class="col-sm-2">-->
<!--                                        <input type="hidden" class="form-control logo1" name="logo" required="" aria-required="true" value="{$info.logo}">-->
<!--                                        <button type="button" class="btn btn-secondary" id="logo1">上传LOGO</button>-->
<!--                                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">-->
<!--                                            预览图：-->
<!--                                            <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-logo">-->
<!--                                                <div class="file-iteme">-->
<!--                                                    <div class="handle" src="{$info.logo}">-->
<!--                                                        <span class="fa fa-times" style="border-radius: 0.375rem 0.375rem 0 0;"></span>-->
<!--                                                    </div>-->
<!--                                                    <img style="width: 5rem;height: 5rem;border-radius: 0.375rem;" src="{$info.logo}">-->
<!--                                                </div>-->

<!--                                            </div>-->
<!--                                        </blockquote>-->
<!--                                    </div>-->
<!--                                </div>-->

                                <div class="form-group row">
                                    <label class="col-sm-1 col-form-label">群二维码</label>
                                    <div class="col-sm-2">
                                        <input type="hidden" class="form-control qrcode" name="qrcode" required="" aria-required="true" value="{$info.qrcode}">
                                        <button type="button" class="btn btn-secondary" id="qrcode">上传群二维码</button>
                                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                            预览图：
                                            <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-qrcode">

                                                <div class="file-iteme">
                                                    <div class="handle" src="{$info.qrcode}">
                                                        <span class="fa fa-times" style="border-radius: 0.375rem 0.375rem 0 0;"></span>
                                                    </div>
                                                    <img style="width: 5rem;height: 5rem;border-radius: 0.375rem;" src="{$info.yqrcode}">
                                                </div>

                                            </div>
                                        </blockquote>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-1 col-form-label">封面图片</label>
                                    <div class="col-sm-8">
                                        <input type="hidden" class="form-control images" name="images" required="" aria-required="true" value="{$info.images_path}">
                                        <button type="button" class="btn btn-secondary" id="images">上传封面</button><span style="color: #6c757d">&nbsp;（ 多图，默认第一张为封面图 ）</span>

                                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                            预览图：
                                            <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-images">

                                                {php}
                                                    if ($info['images_list']) {
                                                        $image_list = explode(',',$info['images_list']);
                                                        foreach ($image_list as $v)
                                                        {
                                                            $path = parse_url($v)['path'];
                                                {/php}

                                                    <div class="file-iteme">
                                                        <div class="handle fm" src="{$path}">
                                                            <span class="fa fa-times" style="border-radius: 0.375rem 0.375rem 0 0;"></span>
                                                        </div>
                                                        <img style="width: 5rem;height: 5rem;border-radius: 0.375rem;" src="{$v}">
                                                    </div>

                                                {php}
                                                    } }
                                                {/php}


                                            </div>
                                        </blockquote>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-1 col-form-label">VIDEO</label>
                                    <div class="input-group col-sm-4">
                                        <button type="button" class="btn btn-secondary" id="video">上传VIDEO</button><span style="color: #6c757d;line-height: 2.188rem">（ 文件大小：10M以内）</span>

                                        <input type="hidden" class="form-control video" name="video" required="" aria-required="true" value="{$info.video}">
                                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 25rem">
                                            预览视频：
                                            <div class="layui-upload-list" id="video-list" style="display: flex;margin-top: 0.625rem">
                                                {if $info.video_path}
                                                    <video width="320" src="{$info.video_path}" class="videos" controls="controls" loop></video>
                                                {/if}
                                            </div>
                                        </blockquote>
                                    </div>
                                </div>


                                <div class="form-group row" style="margin-bottom: 0.5rem;">
                                    <label class="col-sm-1 col-form-label">社群分类</label>
                                    <div class="input-group col-sm-8">
                                        <select class="form-control" id="level1" aria-required="true" style="width:37.5%;">
                                            <option value="">请选择一级分类</option>

                                            {volist name="topCate" id="vo"}
                                                <option value="{$vo.id}" >{$vo.name}</option>
                                            {/volist}
                                        </select>

                                        <select id="level2" disabled class="form-control" style="width:37.5%;">
                                            <option value="">请选择二级分类</option>
                                        </select>

                                        &nbsp;<button type="button" id="btn" class="btn btn-secondary">添加</button>
                                    </div>

                                </div>

                                <!-- 放置已选择社群分类 -->
                                <div class="form-group row">
                                    <div class="col-sm-1 col-form-label">
                                    </div>
                                    <div class="append input-group col-sm-8">
                                        {foreach $info.cateInfo as $key=>$val}
                                            <span class="btn btn-info del" data-content-id="{$key}" style="font-size: 10px;margin-right: 10px;margin-bottom: 10px;">{$val}</span>
                                        {/foreach}
                                    </div>
                                    <input type="hidden" class="form-control cids" name="cids" required="" aria-required="true" value="{$info.cids}">
                                </div>





                                <div class="form-group row">
                                    <label class="col-sm-1 col-form-label">社群简介</label>
                                    <div class="col-sm-8">
<!--                                        <textarea id="content" name="content">{$info.content}</textarea>-->
                                        <textarea id="custom_text" placeholder="社群简介"  name="desc" rows="5" cols="91">{$info.desc}</textarea>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-1 col-form-label">社群详情</label>
                                    <div class="col-sm-8">
                                        <textarea placeholder="社群详情" id="containers" name="content" type="text/plain" style="">{$info.content}</textarea>
                                    </div>
                                </div>
                                

                                <div class="form-group row">
                                    <label for="" class="col-sm-1 col-form-label">操作</label>
                                    <div class="col-sm-5">
                                        <div class="custom-control custom-switch custom-checkbox-secondary custom-control-inline">
                                            <input name="status" type="checkbox"   class="custom-control-input" id="customSwitchInline2" {if $info.status == 1}checked{/if}>
                                            <label class="custom-control-label" for="customSwitchInline2">状态[是否展示]</label>
                                        </div>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-secondary">提交</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </main>

    {include file="public/footer"/}

    <!-- 配置文件 -->
    <script type="text/javascript" src="__STATIC__/assets/js/plugins/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="__STATIC__/assets/js/plugins/ueditor/ueditor.all.js"></script>

    <script>

        // http://fex.baidu.com/ueditor/#start-toolbar
        // 实例化编辑器
        var ue = UE.getEditor('containers',{
            toolbars: [
                [
                    'undo', //撤销
                    'redo', //重做
                    'bold', //加粗
                    'indent', //首行缩进
                    'italic', //斜体
                    'underline', //下划线
                    'strikethrough', //删除线
                    'subscript', //下标
                    'fontborder', //字符边框
                    'superscript', //上标
                    'formatmatch', //格式刷
                    'blockquote', //引用
                    'selectall', //全选
                    'horizontal', //分隔线
                    'removeformat', //清除格式
                    'time', //时间
                    'date', //日期
                    'fontfamily', //字体
                    'fontsize', //字号
                    'paragraph', //段落格式
                    'simpleupload', //单图上传
                    'insertimage', //多图上传
                    'emotion', //表情
                    'spechars', //特殊字符
                    'insertvideo', //视频
                    'justifyleft', //居左对齐
                    'justifyright', //居右对齐
                    'justifycenter', //居中对齐
                    'justifyjustify', //两端对齐
                    'forecolor', //字体颜色
                    'backcolor', //背景色
                    'insertorderedlist', //有序列表
                    'insertunorderedlist', //无序列表
                    'rowspacingtop', //段前距
                    'rowspacingbottom', //段后距
                    'touppercase', //字母大写
                    'tolowercase', //字母小写
                    'background', //背景
                    'scrawl', //涂鸦
                ]
            ],
            initialFrameHeight:350
        });

        // 初始化封面图片路径
        var imagesArr = $('.images').val() ? $('.images').val().split(',') : [];
        // 存储社群分类
        var cateArr = $('.cids').val() ? $('.cids').val().split(',') : [];
        $('#btn').click(function () {
            var ele = $("#level2 option:selected");
            if (ele.val() != '') {
                var text = ele.text();
                console.log(cateArr,cateArr.length);
                var index = $.inArray(ele.val(),cateArr);
                if (index > -1) {
                    toastr.error('不允许重复添加《'+text+'》分类');
                    return false;
                }
                // 只允许添加3个
                if (cateArr.length >= 3) {
                    toastr.error('只允许添加3个分类');
                    return false;
                }
                $('.append').append('<span class="btn btn-info del" data-content-id="'+ele.val()+'" style="font-size: 10px;margin-right: 10px">'+text+'</span>');
                ele.attr('disabled',true).css('background-color','#d8d6d6');
                cateArr.push(ele.val());
                $('.cids').val(cateArr);
            } else {
                toastr.error('请先选择分类后添加');
            }

            delCate();
        });

        // 删除社群分类
        function delCate() {
            $('.del').click(function () {
                console.log($(this),$(this).attr('data-content-id'));
                var id = $(this).attr('data-content-id');
                $('#level2 option[value='+id+']').attr('disabled',false).css('background-color','');
                $(this).remove();
                var index1 = $.inArray(id,cateArr);
                console.log(index1);
                if (index1 > -1) {
                    cateArr.splice(index1,1);
                    $('.cids').val(cateArr);
                }
            });
        }

        $(function() {

            delCate();

            // 二级分类
            $('#level1').change(function () {
                var pid = $("#level1 option:selected").val();
                $("#level2").attr('disabled', true);
                $.post('{:url("/console/getResourceLevel")}', {'pid':pid}, function (res) {
                    if (res.code != 1) {
                        toastr.error(res.msg);
                    } else {
                        result = res.data;
                        var level2 = '<option value="">请选择二级分类</option>';
                        for (var i = 0; i < result.length; i++) {
                            var index = $.inArray(String(result[i].id), cateArr);
                            console.log(String(result[i].id), cateArr, index);
                            var dis = '';
                            var bgcolor = '';
                            if (index > -1) {
                                dis = 'disabled';
                                bgcolor = 'background-color:#d8d6d6';
                            }
                            level2 += '<option ' + dis + ' style="' + bgcolor + '" value=' + result[i].id + '>';
                            level2 += result[i].name;
                            level2 += '</option>';
                        }
                        $("#level2").text('');
                        $("#level2").append(level2);
                        $("#level2").attr('disabled', false);
                    }
                });
            });

            // 城市
            $('#province').change(function(){
                var pid = $("#province option:selected").val();
                $.ajax({
                    type:"post",
                    url:'{:url("/console/getCity")}',
                    data:{'pid':pid},
                    success:function(res){
                        if(res.code == 1){
                            result = res.data;
                            var strocity = '<option value="">请选择城市</option>';
                            for (var i = 0; i < result.length; i++) {
                                strocity += '<option value=' + result[i].location_id + '>';
                                strocity += result[i].name;
                                strocity += '</option>';
                            }
                            $("#city").text('');
                            $("#area").text('');
                            $("#area").append('<option value="">请选择地区</option>');
                            $("#city").append(strocity);
                        }else{
                            toastr.error(res.msg);
                        }
                    }
                })
            });

            // 地区
            $('#city').change(function(){
                var pid = $("#city option:selected").val();
                $.ajax({
                    type:"post",
                    url:'{:url("/console/getArea")}',
                    data:{'pid':pid},
                    success:function(res){
                        if(res.code == 1){
                            result = res.data;
                            var strocity = '<option value="">请选择地区</option>';
                            for (var i = 0; i < result.length; i++) {
                                strocity += '<option value=' + result[i].location_id + '>';
                                strocity += result[i].name;
                                strocity += '</option>';
                            }
                            $("#area").text('');
                            $("#area").append(strocity);
                        }else{
                            toastr.error(res.msg);
                        }
                    }
                })
            });
        });


        // 各种上传
        layui.use('upload', function() {
            var $ = layui.jquery
                , upload = layui.upload;

            // LOGO上传
            upload.render({
                elem: '#logo1'
                ,url: '{:url("/console/imageReturn")}?path=resourceLogo'
                ,before: function(obj){
                    layer.msg('logo上传中...', {
                        icon: 16,
                        shade: 0.05,
                        time: 0
                    });
                }
                ,done: function(res){
                    layer.close(layer.msg());//关闭上传提示窗口
                    // console.log(res)
                    //上传完毕
                    var logo = $('.logo1').val();
                    if (logo != '') {
                        $('#uploader-logo').children('.file-iteme').remove();
                    }
                    $('.logo1').val(res.data.src);
                    $('#uploader-logo').append(
                        '<div id="" class="file-iteme">' +
                        '<div class="handle" src="'+ res.data.src +'"><span class="fa fa-times" style="border-radius: 0.375rem 0.375rem 0 0;"></span></div>' +
                        '<img style="width: 5rem;height: 5rem;border-radius: 0.375rem;" src='+ res.data.src +'>' +
                        // '<div class="info">' + res.data.name + '</div>' +
                        '</div>'
                    );
                }
            });

            // 群二维码上传
            upload.render({
                elem: '#qrcode'
                ,url: '{:url("/console/imageReturn")}?path=resourceQrocde'
                ,before: function(obj){
                    layer.msg('群二维码上传中...', {
                        icon: 16,
                        shade: 0.05,
                        time: 0
                    });
                }
                ,done: function(res){
                    layer.close(layer.msg());//关闭上传提示窗口
                    // console.log(res)
                    //上传完毕
                    var qrcode = $('.qrcode').val();
                    if (qrcode != '') {
                        $('#uploader-qrcode').children('.file-iteme').remove();
                    }
                    $('.qrcode').val(res.data.src);
                    $('#uploader-qrcode').append(
                        '<div id="" class="file-iteme">' +
                        '<div class="handle" src="'+ res.data.src +'"><span class="fa fa-times" style="border-radius: 0.375rem 0.375rem 0 0;"></span></div>' +
                        '<img style="width: 5rem;height: 5rem;border-radius: 0.375rem;" src='+ res.data.src +'>' +
                        // '<div class="info">' + res.data.name + '</div>' +
                        '</div>'
                    );
                }
            });

            // 封面图片上传
            upload.render({
                elem: '#images'
                ,url: '{:url("/console/imageReturn")}?path=resourceList'
                ,multiple: true
                ,before: function(obj){
                    layer.msg('封面图片上传中...', {
                        icon: 16,
                        shade: 0.05,
                        time: 0
                    });
                }
                ,done: function(res){
                    layer.close(layer.msg());//关闭上传提示窗口
                    // console.log(res)
                    //上传完毕
                    var images = $('.images').val();

                    if (images != '') {
                        images += ',' + res.data.src;
                    } else {
                        images = res.data.src;
                    }

                    imagesArr.push(res.data.src);

                    $('.images').val(images);
                    $('#uploader-images').append(
                        '<div id="" class="file-iteme">' +
                        '<div class="handle fm" src="'+ res.data.src +'"><span class="fa fa-times" style="border-radius: 0.375rem 0.375rem 0 0;"></span></div>' +
                        '<img style="width: 5rem;height: 5rem;border-radius: 0.375rem;" src='+ res.data.src +'>' +
                        // '<div class="info">' + res.data.name + '</div>' +
                        '</div>'
                    );
                }
            });

            // 视频上传
            upload.render({
                elem: '#video'
                ,url: '{:url("/console/videoReturn")}?path=resourceList'
                ,accept: 'video' // 视频类型
                ,size: 1024*10 // 限定大小，最大10M
                ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                    layer.msg('video上传中...', {
                        icon: 16,
                        shade: 0.05,
                        time: 0
                    });
                }
                ,done: function(res, index, upload){
                    console.log(res);
                    layer.close(layer.msg());//关闭上传提示窗口
                    if (res.code != 1) {
                        return toastr.error(res.msg);
                    }

                    var video = $('.video').val();
                    if (video != '') {
                        $('#video-list').children('.videos').remove();
                    }
                    $('.video').val(res.data);
                    // 上传完毕
                    $('#video-list').append(
                        '<video width="320" src="'+res.data+'" class="videos" controls="controls" loop></video>'
                    );
                }
                ,error: function(index, upload){
                    layer.close(layer.msg());//关闭上传提示窗口
                }
            });

        });

        // 图片显示删除
        $(document).on("mouseenter mouseleave", ".file-iteme", function(event){
            if(event.type === "mouseenter"){
                //鼠标悬浮
                $(this).children(".info").fadeIn("fast");
                $(this).children(".handle").fadeIn("fast");
            }else if(event.type === "mouseleave") {
                //鼠标离开
                $(this).children(".info").hide();
                $(this).children(".handle").hide();
            }
        });

        // 删除图片
        $(document).on("click", ".file-iteme .handle", function(event){
            console.log($(this),$(this).attr('src'));

            // 封面图片删除
            if ($(this).is('.fm')) {
                var index1 = $.inArray($(this).attr('src'),imagesArr);
                console.log(index1);
                if (index1 > -1) {
                    imagesArr.splice(index1,1);
                    $('.images').val(imagesArr);
                }
            }

            $(this).parent().remove();

        });

        // 编辑器
        layui.use('layedit', function(){
            var layedit = layui.layedit;
            // 编辑器的图片上传
            layedit.set({
                uploadImage: {
                    url: '{:url("/console/imageReturn")}?path=resourceContent' //接口url
                    ,type: 'post' //默认post
                }
            });
            index = layedit.build('content',{
                height: 350 //设置编辑器高度
                ,hideTool:['link','unlink']
            }); //建立编辑器
        });

    </script>


</div>